<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><!--引入semanticUI-->
    <link rel="stylesheet" type="text/css" href="../../static/css/myUse.css" th:href="@{/css/myUse.css}">
    <link rel="stylesheet" type="text/css" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}" />

</head>
<body>

    <!--导航部分-->
    <nav class="ui inverted attached segment" >
        <div class="ui container">
            <!--导航栏-->
            <!--stackable是为了适配移动端-->
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item">YwrbyBlog管理界面</h2>

                <a href="/admin/blogs" class="item m-mobile-hide m-item"><i class="home icon"></i> Blogs</a> <!--首页-->
                <a href="/admin/tags" class="item m-mobile-hide m-item"><i class="idea icon"></i> Tags</a> <!--时间线 归档-->
                <a href="#" class="item m-mobile-hide m-item"><i class="info icon"></i> About</a> <!--关于我-->

                <div class="right item m-mobile-hide m-item">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search...">
                        <i class="search icon link"></i>
                    </div>
                </div>
            </div>
        </div>
        <a class="menu toggle ui black button icon m-right-top m-mobile-show">
            <i class="icon sidebar"></i>
        </a>
    </nav>

    <!--管理界面-->
    <div class="m-padded-tb-large">
        <div class="ui container">
            <div class="ui top attached secondary segment">
                <h2>博客编辑</h2>
            </div>
            <div class="ui attached segment">
                <div class="ui container">
                    <form action="#" class="ui form" method="post">
                        <div class="two fields">
                            <div class="ui labeled input fluid field required">
                                <div class="ui teal basic label">标题</div>
                                <input type="text" name="title" placeholder="输入标题...">
                            </div>

                            <div class="ui labeled input fluid field">
                                <div class="ui teal basic label">标签</div>
                                <div class="ui selection multiple dropdown">
                                    <input type="hidden" name="gender">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">无</div>
                                    <div class="menu">
                                        <div class="item" data-value="Spring" >
                                            Spring
                                        </div>
                                        <div class="item" data-value="JavaWeb" >
                                            JavaWeb
                                        </div>
                                        <div class="item" data-value="SpringBoot" >
                                            SpringBoot
                                        </div>
                                        <div class="item" data-value="Java" >
                                            Java
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="field">
                            <div id="test-editor">
                                <textarea style="display:none;">### 关于 Editor.md**Editor.md</textarea>
                            </div>
                        </div>

                        <div class="ui error message"></div>

                        <div class="ui container m-padded-tb-large center aligned">
                            <button class="ui primary button" type="submit">
                                <i class="save icon"></i>
                                保存
                            </button>
                            <button class="ui button" type="button" onclick="window.history.back(-1)">
                                <i class="reply icon"></i>
                                返回
                            </button>
                        </div>

                    </form>


                </div>

            </div>

        </div>
    </div>

    <!--页脚部分-->
    <footer  class="ui inverted vertical segment"  th:replace="_bottom :: bottom" >
        <!--center aligned保证所有条目居中显示-->
        <div class="ui container center aligned">
            <!--inverted表示颜色反转，divided表示按照给定大小显示分界线，二者共同作用显示反色分界线-->
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <img src="../../static/img/mycode.png" th:src="@{/img/mycode.png}" alt="" style="width: 100px">
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">【Blog】Test1</a>
                        <a class="item" href="#">【Blog】Test2</a>
                        <a class="item" href="#">【Blog】Test3</a>
                    </div>
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">Tel: 187xxxx3839</a>
                        <a class="item" href="#">Email: ywrby@test.cn</a>
                    </div>
                </div>

                <div class="five wide column">
                    <h4 class="ui inverted header">关于我</h4>
                    <p class="ui inverted m-opacity-mini m-text-thin m-text-spaced m-text-lined">
                        I am a Student majoring in CS at SWU. If you have any questions about the computer, You can contact me by the way beside
                    </p>
                </div>


            </div>
            <!--分割线-->
            <div class="ui inverted section divider"></div>
            <p class=" m-opacity-mini m-text-thin m-text-spaced m-text-lined">©2020 - 2021 By Ywrby</p>
        </div>
    </footer>

    <div >
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--jquery-->
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!--semanticUI-->
        <script src="../../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script>
    </div>

    <!--定义汉堡按键实现汉堡菜单-->
    <script>
        $(".menu.toggle").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        })

        $('.ui.dropdown')
            .dropdown()
        ;

        $('.ui.form').form({
            fields : {
                title : {
                    identifier : 'title',
                    rules : [{
                        type : 'empty' ,
                        prompt : '标题不能为空，请输入标题'
                    }]
                }
            }
        })

        $(function() {
            var editor = editormd("test-editor", {
                // width  : "100%",
                height : 640,
                path   : "../../static/lib/editormd/lib/",
                // 自定义的增强配置！
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                emoji: true, // 开启表情的功能！ 图片的本地配置！
                // theme: "light",//工具栏主题
                // previewTheme: "dark",//预览主题
                // editorTheme: "pastel-on-dark",//编辑主题
                // markdown的配置！
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                //图片上传
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/article/file/upload", // 文件上传的处理请求！
                onload : function() {
                    console.log('onload', this);
                },
                /*指定需要显示的功能按钮*/
                toolbarIcons : function() {
                    return ["undo","redo","|",
                        "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                        "h1","h2","h3","|",
                        "list-ul","list-ol","hr","|",
                        "link","reference-link","image","code","preformatted-text",
                        "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                        "goto-line","watch","preview","clear","search"]
                },
                // 这里的自定义功能就好比，Vue 组件

                /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
                toolbarIconTexts : {
                    releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                    index : "<span bgcolor=\"red\">返回首页</span>",
                },

                /*给自定义按钮指定回调函数*/
                toolbarHandlers:{
                    releaseIcon : function(cm, icon, cursor, selection) {
                        //表单提交
                        mdEditorForm.method = "post";
                        mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                        mdEditorForm.submit();
                    },
                    index : function(){
                        window.location.href = '/';
                    },
                }
            });
        });
    </script>
</body>
</html>